import axios from "axios";
import { ElLoading, ElMessage } from 'element-plus'

let loadingInstance: any = null

// 使用create方法创建axios实例
const request =
    axios.create({

        baseURL: '/api',
        timeout: 30000 // 请求超时时间

    })
// 添加请求拦截器==>当发送请求之前进行的方法
// ?网速快看不出效果，慢速网络下，只要开始发送请求，就会显示出loading效果了
request.interceptors.request.use(config => {
    /**
     * 在需要调用时：
     * Loading.service(options);
     * 其中 options 参数为 Loading 的配置项，
     */
    loadingInstance = ElLoading.service({
        lock: true, // 锁定屏幕
        text: 'loading...'
    })
    return config
})

// 添加响应拦截器==》请求返回数据时触发的方法 【可根据返回的response的错误代码，来区分提示不同错误】
request.interceptors.response.use(response => {
    // console.log('请求返回数据中了。。')
    //   loading实例对象名.close();用于关闭遮罩层
    loadingInstance.close()
    // console.log(response)

    return response
}, error => {
    console.log('请求错误==>', error)
    const msg = error.Message !== undefined ? error.Message : ''
    ElMessage({
        // 是否显示msg的关闭按钮
        showClose: true,
        message: '网络请求错误' + msg,
        type: 'error',
        duration: 3 * 1000
    })
    //   loading实例对象名.close();用于关闭遮罩层
    loadingInstance.close()
    return Promise.reject(error)
})

// !暴露Service这个方法出去
// 对应的引入方法： import Service from './utils/Service.js'
// export default Service

// 对应的引入方法： import { Service } from './utils/Service.js'
export default request
